<template>
  <div class="userinfo">
    <a-popover
      trigger="click"
      overlayClassName="header-popover"
      :getPopupContainer="GetPopupContainer"
      placement="topLeft"
    >
      <template #title>
        <div class="popover-title">
          <rb-icon type="icon-luoshu-creater" />
          <span class="title-text" :title="userInfo.username">
            {{ userInfo.username }}
          </span>
          <span class="logout" @click="onLogout">退出</span>
        </div>
      </template>
      <template #content>
        <div class="item-group menu">
          <div class="item-box" @click="onMenuClick('personal')">
            <rb-icon type="icon-luoshu-creater" />
            <label class="label">{{ $t(`menu.personal`) }}</label>
          </div>
          <div class="item-box" @click="onMenuClick('organization')">
            <rb-icon type="icon-luoshu-owner-dept" />
            <label class="label">{{ $t(`menu.organization`) }}</label>
          </div>
          <div class="item-box" @click="onMenuClick('authManage')">
            <rb-icon type="icon-luoshu-auth" />
            <label class="label">{{ $t(`menu.authManage`) }}</label>
          </div>
        </div>
        <div class="item-group theme">
          <label class="label">{{ $t(`menu.theme`) }}</label>
          <a-radio-group v-model:value="themeType">
            <a-radio-button value="skyBlue">
              {{ $t(`menu.skyBlue`) }}
            </a-radio-button>
            <a-radio-button value="peacockGreen">
              {{ $t(`menu.peacockGreen`) }}
            </a-radio-button>
          </a-radio-group>
        </div>
        <div class="item-group language">
          <label class="label">{{ $t(`menu.language`) }}</label>
          <a-radio-group v-model:value="language">
            <a-radio-button value="zh-cn">
              {{ $t(`menu.chinese`) }}
            </a-radio-button>
            <a-radio-button value="en-us">
              {{ $t(`menu.english`) }}
            </a-radio-button>
          </a-radio-group>
        </div>
      </template>
      <rb-icon type="icon-luoshu-creater" />
    </a-popover>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';
import { SetTheme, GetPopupContainer } from '@/global/util/preUtils';

export default defineComponent({
  name: 'Userinfo',
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const userInfo = computed(() => store.state.root.userInfo);
    const themeType = computed({
      get: () => store.state.root.themeType,
      set: (val) => {
        SetTheme(val);
        localStorage.setItem('themeType', val);
        store.commit('root/SetThemeType', val);
      },
    });

    const { locale } = useI18n();
    const language = computed({
      get: () => store.state.root.language,
      set: (val) => {
        locale.value = val;
        localStorage.setItem('language', val);
        store.commit('root/SetLocale', val);
      },
    });
    const onMenuClick = (path: string) => {
      const schemaCode: any = route.query?.schemaCode ?? '';
      router.push({ path: `/${path}`, query: { schemaCode } });
    };
    const onLogout = () => {
      store.dispatch('root/logout');
    };

    return {
      GetPopupContainer,
      userInfo,
      themeType,
      language,
      onLogout,
      onMenuClick,
    };
  },
});
</script>

<style lang="less" scoped>
:deep .ant-popover-inner-content {
  padding: 12px 0;
}
.userinfo {
  .flexRow();
  :deep .header-popover {
    width: 200px;
    .popover-title {
      .flexRow(flex-start, center);
      .title-text {
        flex: auto;
        max-width: 140px;
        padding-left: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .logout {
        white-space: nowrap;
        &:hover {
          color: @rb-primary-color;
        }
        cursor: pointer;
      }
    }
    .item-group {
      .flexColumn(flex-start, flex-start);
      padding: 0 12px 8px;
      &:last-child {
        padding-bottom: 0;
        border-bottom: none;
      }
      .label {
        margin-bottom: 4px;
      }
      &.menu {
        padding: 0 0 8px;
        .item-box {
          width: 100%;
          padding: 0 12px;
          line-height: 32px;
          cursor: pointer;
          &:hover {
            background-color: @rb-table-header-bg;
          }
          .rb-icon {
            color: @rb-label-color;
            margin-right: 8px;
          }
          .label {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
